<template>
  <div class="main">
    <el-tabs type="border-card">
      <el-tab-pane label="海诚·云工场总览">
        <div class="tab-item">
          <iframe :src="overview_url" class="myIframe" />
        </div>
      </el-tab-pane>

      <el-tab-pane label="单项目软件使用情况">
        <div class="tab-item">
          <iframe :src="single_proj_url" class="myIframe" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="用户登录使用情况">
        <div class="tab-item">
          <iframe :src="login_url" class="myIframe" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="项目使用情况">
        <div class="tab-item">
          <iframe :src="proj_url" class="myIframe" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="在线时长统计">
        <div class="tab-item">
          <iframe :src="online_duration_url" class="myIframe" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Graph',
  components: {
  },
  data() {
    return {
      overview_url: '',
      single_proj_url: '',
      login_url: '',
      proj_url: '',
      online_duration_url: ''
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  created() {
    // 海诚·云工场总览 overview_url
    // 单项目软件使用情况 single_proj_url
    // 用户登录使用情况 login_url
    // 项目使用情况 proj_url
    // 在线时长统计 online_duration_url
    const messageStore = JSON.parse(localStorage.getItem('messageStore'))
    const usernumber = this.user.username
    if (this.$store.getters.pageParmas.overview_url && this.$store.getters.pageParmas.overview_url.value) {
      this.overview_url = this.$store.getters.pageParmas.overview_url.value + usernumber
    } else if (messageStore && messageStore.overview_url && messageStore.overview_url.value) {
      this.overview_url = messageStore.overview_url.value + usernumber
    } else {
      this.overview_url = ''
    }
    if (this.$store.getters.pageParmas.single_proj_url && this.$store.getters.pageParmas.single_proj_url.value) {
      this.single_proj_url = this.$store.getters.pageParmas.single_proj_url.value
    } else if (messageStore && messageStore.single_proj_url && messageStore.single_proj_url.value) {
      this.single_proj_url = messageStore.single_proj_url.value
    } else {
      this.single_proj_url = ''
    }
    if (this.$store.getters.pageParmas.login_url && this.$store.getters.pageParmas.login_url.value) {
      this.login_url = this.$store.getters.pageParmas.login_url.value
    } else if (messageStore && messageStore.login_url && messageStore.login_url.value) {
      this.login_url = messageStore.login_url.value
    } else {
      this.login_url = ''
    }
    if (this.$store.getters.pageParmas.proj_url && this.$store.getters.pageParmas.proj_url.value) {
      this.proj_url = this.$store.getters.pageParmas.proj_url.value
    } else if (messageStore && messageStore.proj_url && messageStore.proj_url.value) {
      this.proj_url = messageStore.proj_url.value
    } else {
      this.proj_url = ''
    }
    if (this.$store.getters.pageParmas.online_duration_url && this.$store.getters.pageParmas.online_duration_url.value) {
      this.online_duration_url = this.$store.getters.pageParmas.online_duration_url.value + usernumber
    } else if (messageStore && messageStore.online_duration_url && messageStore.online_duration_url.value) {
      this.online_duration_url = messageStore.online_duration_url.value + usernumber
    } else {
      this.online_duration_url = ''
    }
  }
}
</script>
<style lang="scss" scoped>
html,body {
  height: 100%;
  width: 100%;
  overflow: auto !important;
}
*{
  margin: 0px;
  padding: 0px;
  border: none;
}
.tab-item{
  width: 100%;
  height: 700px;
}
.myIframe{
  width: 100%;
  height: 100%;
  overflow: auto;
}
.main{
  width: 100%;
  height: 100%;
}
@media screen and (min-height: 1440px){
  .tab-item{
    height: 1180px;
  }
}
@media screen and (max-height: 1440px) and (min-height: 1200px){
  .tab-item{
    height: 1100px;
  }
}
@media screen and (max-height: 1200px) and (min-height: 1080px){
  .tab-item{
    height: 900px;
  }
}
@media screen and (max-height: 1080px) and (min-height: 1050px){
  .tab-item{
    height: 820px;
  }
}
@media screen and (max-height: 1050px) and (min-height: 1024px){
  .tab-item{
    height: 785px;
  }
}
@media screen and (max-height: 1024px) and (min-height: 960px){
  .tab-item{
    height: 760px;
  }
}
@media screen and (max-height: 960px)and (min-height: 900px){
  .tab-item{
    height: 700px;
  }
}
@media screen and (max-height: 900px) and (min-height: 864px){
  .tab-item{
    height: 635px;
  }
}
@media screen and (max-height: 864px) and (min-height: 768px){
  .tab-item{
    height: 560px;
  }
}
@media screen and (max-height: 768px){
  .tab-item{
    height: 500px;
  }
}
</style>

